import React, { useEffect, useState } from 'react'
import { Toast, NavBar, Tag, Divider, Cell } from 'react-vant';
import '../css/Hwj_index.css'
import { createFromIconfontCN } from '@react-vant/icons'
import { useLocation, useNavigate } from 'react-router-dom';
import { get } from '../../../axios/request'
const IconFont = createFromIconfontCN(
    '//at.alicdn.com/t/c/font_4695075_pl7cx9w2bje.js'
)
export default function ServiceCenter() {
    let navigate = useNavigate()
    let location = useLocation()
    let [id, setId] = useState(location.state != null ? location.state.id : '')
    let service_type = [
        { icon: 'icon-shoutibao', title: '物品遗失', path: '' },
        { icon: 'icon-qianbao', title: '未坐车需付车费', path: '' },
        { icon: 'icon-miaobiao1', title: '下车后未结束计算', path: '' },
        { icon: 'icon-dingwei', title: '司机绕路', path: '/hwj_details' },
        { icon: 'icon-yewubiaodan', title: '被收取消费', path: '' },
        { icon: 'icon-qitafuwu', title: '多收附加费', path: '' }
    ]
    let other_func = [
        { icon: 'icon-chaxun', title: '查询处理进度', path: '/hwj_progress' },
        { icon: 'icon-kefu1', title: '联系客服', path: '' },
    ]
    let [journey, setJourney] = useState([])
    let getjourney = async () => {
        let res = await get('/hwj/getjourney', { userid: '67073b3a316728bcfadbc349', _id: id })
        console.log(res.data);

        if (res.code === 200) {
            setJourney(res.data)
        }
    }
    useEffect(() => {
        getjourney()
    }, [])
    return (
        <div id='servicebox'>
            <NavBar
                title="客服中心"
                // leftText=""
                // rightText="按钮"
                onClickLeft={() => navigate('/app')}
                onClickRight={() => Toast('按钮')}
            />
            <div className='conbox'>
                {
                    journey.slice(0, 1).map(item => (
                        <div key={item._id}>
                            <div className='con_1'>
                                <h5>我的行程</h5>
                                <button onClick={() => { navigate('/hwj_other') }}>切换订单</button>
                            </div>
                            <div className='con_2'>
                                <p>约车 {item.times}</p>
                                <Tag color="rgb(227, 227, 227)" textColor="grey">已完成</Tag>
                            </div>
                            <div className="con_3">
                                <div>
                                    <IconFont name='icon-yuandian' fontSize={25} />
                                    <span>{item.start}</span>
                                </div>
                                <div>
                                    <IconFont name='icon-yuandian-green' fontSize={25} />
                                    <span>{item.end}</span>
                                </div>
                            </div>
                            <Divider style={{ borderColor: 'rgb(227, 227, 227)' }} />
                            <div className='con_1'>
                                <h5>服务类型</h5>
                            </div>
                            <div className='con_4'>
                                {
                                    service_type.map(i => (
                                        <Cell key={i.title} onClick={() => { navigate(i.path,{state:{id:item._id}}); }} icon={<IconFont name={i.icon} fontSize={25} />} isLink title={i.title} />
                                    ))
                                }
                            </div>
                            <Divider style={{ borderColor: 'rgb(227, 227, 227)' }} />
                            <div className='con_1'>
                                <h5>其他功能</h5>
                            </div>
                            <div className='con_4'>
                                {
                                    other_func.map(i => (
                                        <Cell key={i.title} onClick={() => { navigate(i.path) }} icon={<IconFont name={i.icon} fontSize={25} />} isLink title={i.title} />
                                    ))
                                }
                            </div>
                        </div>
                    ))
                }

            </div>
        </div>
    )
}
